import React, { Component } from "react"
import { observer, inject } from "mobx-react"
import { Link, withRouter } from "react-router-dom"
import cssModules from "react-css-modules"
import { Row, Col } from "antd"
import ScreenModal from "../ScreenModal"
import More from "../More"
import ModalContent from "../Module/components/ModalContent/index.js"
import { toJS } from "mobx"

import styles from "./index.less"

@inject("ScreenStore")
@observer
@cssModules(styles)
class Overview extends Component {
  state = {}
  constructor(props) {
    super(props)

    this.store = this.props.ScreenStore
  }
  componentWillMount() {
    const { getAlternatingCurrent } = this.store
    getAlternatingCurrent()
  }
  handleClick = () => {
    const { confim } = this.store
    confim("acInput")
  }

  render() {
    const { alternatingCurrent } = this.store
    let data = []
    let state = ""
    let general = []
    let frequency = Number(alternatingCurrent.frequency)
    if (frequency >= 30) {
      state = "通电"
      data = alternatingCurrent.electric || []
      general = data.filter((item) => {
        return (
          item.spName.indexOf("电压") !== -1 ||
          item.spName.indexOf("频率") !== -1
        )
      })
    } else if (frequency < 30) {
      state = "停电"
      data =
        alternatingCurrent.dynamo.map((item) => {
          return { ...item, value: "" }
        }) || []
      general = data.filter((item) => {
        return (
          item.spName.indexOf("电压") !== -1 ||
          item.spName.indexOf("频率") !== -1
        )
      })
    }

    let newData = [...data]
    newData[0] &&
      newData.splice(1, 0, { spName: "工作状态", value: state, show: true })

    return (
      <div styleName="ac-input-container">
        <div styleName={"title-container"}>
          <div styleName={"title-selected"} />
          <div styleName={"title"}>交流输入</div>
        </div>
        <More handleClick={this.handleClick} />
        <Row
          type="flex"
          justify="space-between"
          styleName={"ac-input-data"}
          align="bottom"
        >
          {newData.map((item, i) => {
            if (!item.show) return null
            return (
              <Col span={12} key={i.toString(36) + i}>
                <div styleName={"item"}>
                  <span styleName={"title"}>{item.spName}</span>
                  <span styleName={"point"}>:</span>
                  <span styleName={"value"}>
                    {i === 1
                      ? item.value
                      : item.value
                      ? Number(item.value) + " " + item.unit
                      : "-"}
                  </span>
                </div>
              </Col>
            )
          })}
        </Row>
        <ScreenModal
          type={"acInput"}
          title={"交流输入"}
          className={styles["modal-wrap"]}
        >
          <div className={styles["modal-ct"]}>
            <div className={styles["header"]}>
              <div className={styles["down-period-title"]}>
                <span className={styles["text"]}>电压/频率</span>
                <span className={styles["one"]} />
                <span className={styles["two"]} />
                <span className={styles["three"]} />
                <span className={styles["four"]} />
              </div>
            </div>
            <ModalContent data={general || []} />
            <div className={styles["header"]}>
              <div className={styles["down-period-title"]}>
                <span className={styles["text"]}>市电</span>
                <span className={styles["one"]} />
                <span className={styles["two"]} />
                <span className={styles["three"]} />
                <span className={styles["four"]} />
              </div>
            </div>

            <ModalContent
              data={(alternatingCurrent.electric || []).filter((item) => {
                return (
                  item.spName.indexOf("电压") === -1 &&
                  item.spName.indexOf("频率") === -1
                )
              })}
            />
            <div className={styles["header"]}>
              <div className={styles["down-period-title"]}>
                <span className={styles["text"]}>油机</span>
                <span className={styles["one"]} />
                <span className={styles["two"]} />
                <span className={styles["three"]} />
                <span className={styles["four"]} />
              </div>
            </div>

            <ModalContent
              data={(alternatingCurrent.dynamo || []).filter((item) => {
                return (
                  item.spName.indexOf("电压") === -1 &&
                  item.spName.indexOf("频率") === -1
                )
              })}
            />
          </div>
        </ScreenModal>
      </div>
    )
  }
}

export default Overview
